{extend name="public/container"}
{block name='head_top'}
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/third-party/zeroclipboard/ZeroClipboard.js"></script>
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="{__ADMIN_PATH}plug/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="{__PC_KS3}src/async.min.js"></script>
{/block}
{block name="content"}
<div id="myApp">
    <div class="add-page-title flex flex-between padding-20">
        <div class="title">新增/编辑</div>
        <el-link :underline="false" type="primary" href="{:Url('index')}">返回</el-link>
    </div>
    <div class="padding-10">
        <div class="content-wrap flex flex-between padding-20">
            <div class="basic-info-form-wrap">
                <el-form :model="formData" :rules="rules" ref="formData" label-width="100px" >
                    <el-form-item label="所属{:lang('Organ')}" prop="org_id" v-if="!disable_organ">
                        <el-select
                        :clearable=true
                        placeholder="所属{:lang('Organ')}"
                        @change="doSwitchOrgan"
                        :disabled="organs.length==0"
                        v-model="formData.org_id">
                            <el-option v-for="item in organs" :label="item.organ_name" :key="item.id" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="所属{:lang('School')}" prop="school_id" v-if="!disable_school">
                        <el-select
                        :clearable=true
                        placeholder="所属{:lang('School')}"
                        v-model="formData.school_id"
                        :disabled="schools.length==0"
                        filterable>
                            <el-option v-for="item in schools" :label="item.school_name" :key="item.id" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="{:lang('Service')}名称" prop="name">
                        <el-input v-model="formData.name" maxlength="20" show-word-limit placeholder="{:lang('Service')}名称" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="所属类别" prop="cate_id">
                        <el-select :clearable=true placeholder="所属类别" v-model="formData.cate_id">
                            <el-option v-for="item in categories" :label="item.cate_name" :key="item.id" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="售价" prop="price">
                        <el-input-number :controls="false" v-model="formData.price" placeholder="售价" autocomplete="off"></el-input-number>
                    </el-form-item>
                    <el-form-item label="原始售价" prop="original_price">
                        <el-input-number :controls="false" v-model="formData.original_price" placeholder="原始售价" autocomplete="off"></el-input-number>
                    </el-form-item>

                    <el-form-item label="推荐前台" prop="is_rmt">
                        <el-select :clearable=true placeholder="推荐前台" v-model="formData.is_rmt">
                            <el-option label="是" key="1" :value="1"></el-option>
                            <el-option label="否" key="0" :value="0"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="状态" prop="status">
                        <el-radio v-model="formData.status" name="status" :label="1">开启</el-radio>
                        <el-radio v-model="formData.status" name="status" :label="0">禁用</el-radio>
                    </el-form-item>

                    <el-form-item label="{:lang('Service')}工时" prop="service_minutes">
                        <el-input type="number" v-model="formData.service_minutes" placeholder="{:lang('Service')}工时" autocomplete="off">
                            <template slot="append">分钟</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="服务功效" prop="distinct">
                        <el-tag
                          :key="tag"
                          v-for="tag in formData.label"
                          closable
                          :disable-transitions="false"
                          @close="handleClose(tag)">
                          {{tag}}
                        </el-tag>
                        <el-input
                          class="input-new-tag"
                          v-if="newLableVisible"
                          v-model="newLableValue"
                          ref="saveTagInput"
                          size="small"
                          @keyup.enter.native="handleInputConfirm"
                          @blur="handleInputConfirm"
                        >
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增</el-button>
                    </el-form-item>

                    <el-form-item label="封面图" prop="cover">
                        <el-upload
                            style="width:100%;height:100%"
                            class="avatar-uploader"
                            accept="image/jpeg,image/png"
                            action="{:Url('index/jsy_upload')}"
                            :data="{path:'basic_cover' , size_control:'750*400', size_strict:false }"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="formData.cover.pic" :src="formData.cover.pic" class="avatar" @mouseenter="mouseOver" @mouseleave="mouseLeave">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            <div v-if="formData.cover.pic && showMask" class="flex flex-center flexcenter" style="position: absolute; top: 0;left: 0;width: 100%;height: 100%;background-color: #000;opacity: .8; pointer-events: none">
                                更换
                            </div>
                            <div slot="tip" class="el-upload__tip">尺寸建议为750×400或等比例，只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="详情内容" prop="cover">
                        <el-form-item>
                            <textarea id="detail" style="width:100%;height: 400px">{{formData.detail}}</textarea>
                        </el-form-item>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="doSave('formData')">立即提交</el-button>
                        <el-button @click="doReset('formData')">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</div>

<style type="text/css">
    .el-tag:not(:last-child) {
        margin-right: 10px;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>

{/block}

{block name="script"}
<script>
    var data    = <?=isset($data) ? $data : "{}"?>;
console.log(data)
    var my = new Vue({
        el: "#myApp",
        data: {
            formData: {
                id: data.id || 0,
                org_id: data.org_id || (default_org_id || ''),
                school_id: data.school_id || (default_school_id || ''),
                name: data.name || '',
                cover: data.cover || {},
                cate_id: data.cate_id || 0,
                price: data.price || '',
                status:data.status || 1,
                original_price: data.original_price || '',
                is_rmt: data.is_rmt || 0,
                status:data.status || 1,
                service_minutes:data.service_minutes || '',
                label:data.label || [],
                detail: data.detail || ''
            },
            categories:[],
            organs: [],
            schools:[],
            disable_organ: default_org_id > 0 ? true : false,
            disable_school: default_school_id > 0 ? true : false,
            newLableVisible: false,
            newLableValue: '',
            rules: {
                org_id: [
                    { required: true, message: '此项不能为空', trigger: 'blur' },
                ],
                school_id: [
                    { required: true, message: '此项不能为空', trigger: 'blur' },
                ],
                cate_id: [
                    { required: true, message: '此项不能为空', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '此项不能为空', trigger: 'blur' },
                ],
                price: [
                    { required: true, message: '此项不能为空', trigger: 'blur' },
                ]
            },
            showMask:false,
            ue:null
        },
        methods: {
            doLoadOrgans () {
                axios.get(Url({c:'teachaffair.organ',a:'get_all' , q:{org_id:default_org_id}}))
                    .then(res => {
                        this.organs = res.data.data
                    })
            },
            doSwitchOrgan (org_id) {
                this.formData.school_id = ''
                this.doLoadSchools(org_id)
            },
            doLoadSchools (org_id) {
                axios.get(Url({c:'supervision.school',a:'get_all' , q:{org_id:org_id}}))
                    .then(res => {
                        this.schools = res.data.data
                    })
            },
            doLoadCategories () {
                axios.get(Url({c:'category.category',a:'get_list' , q:{type:2}}))
                    .then(res => {
                        this.categories = res.data.data
                    })
            },
            doSave(formName) {
                this.formData.detail = this.ue.getContent()
                this.$refs[formName].validate((valid) => {
                    if ( valid ) {
                        axios.post(Url({a:'save'}) , this.formData).then(res => {
                            this.$message({
                                message: res.data.msg,
                                type: res.data.code === 200 ? 'success' : 'error',
                            });

                            setTimeout(function(){
                                window.location.href = Url({a:'index'})
                            },2000)
                        }).catch(_ => {
                            this.$message({
                                message: '操作失败',
                                type: 'error'
                            })
                        })
                    }
                });
            },
            doReset(formName) {
                this.$confirm('确认取消并返回列表页吗?').then(_ => {
                    window.location.href = Url('index')
                }).catch(_ => {})
            },
            handleAvatarSuccess(res, file) {
                if ( res.code == 0 ) {
                    return this.formData.cover = res;
                }
                return this.$message.error(res.state);
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 5;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 5MB!');
                }
                return isLt2M;
            },
            mouseOver () {
                this.showMask = true;
            },
            mouseLeave() {
                this.showMask = false;
            },
            handleClose(tag) {
                this.formData.label.splice(this.formData.label.indexOf(tag), 1);
            },

            showInput() {
                this.newLableVisible = true;
                this.$nextTick(_ => {
                  this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let newLableValue = this.newLableValue;
                if (newLableValue) {
                  this.formData.label.push(newLableValue);
                }
                this.newLableVisible = false;
                this.newLableValue = '';
            }

        },
        mounted(){
            this.ue = UE.getEditor('detail');
            this.doLoadCategories()

            this.doLoadOrgans()
            if ( default_org_id > 0 || this.formData.org_id > 0 ) {
                org_id = default_org_id || this.formData.org_id
                this.doLoadSchools(org_id)
            }
        }
    })
</script>
{/block}